<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="header :: header"></div>
    <title>菜单管理</title>
    <script th:src="@{/static/js/modules/sys/sysMenu.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:include="body :: body"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <button class="layui-btn layui-btn-lg" id="addMenu">添加</button>
            <div style="height:30px"></div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="menuTree" id="menuTree">
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-space3">

                    <div id="formDiv">
                        <!--form表单-->
                        <form  class="layui-form" lay-filter="form">
                            <input type="text"  style="display:none" name="menuId" id="menuId">
                            <div class="layui-form-item" id="menuParent">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">菜单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">菜单地址</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="url" id="url" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图标</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="icon" id="icon" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formButton">立即提交</button>
                                    <button class="layui-btn" lay-submit lay-filter="deleteButton">删除</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="footer :: footer"></div>
</div>

<script>
    layui.use(['form'], function(){
        var form = layui.form
        //监听提交
        form.on('submit(formButton)', function(data){
            var url="/sys/menu/save";
            if($("#menuId").val()!="")
                url="/sys/menu/update"
            $.ajax({
                url:url,
                type:"post",
                contentType: "application/json",
                data:JSON.stringify(data.field),
                success:function (r) {
                    if (r.code == 0) {
                        layer.msg(r.msg, {
                            icon: 1,
                            shade: 0.3,
                            time: 2000
                        }, function () {
                            //疯狂模式，关闭所有层

                            parent.layer.closeAll();
                            loadMenu();
                            loadLeftMenu();
                            appendMenuParentHtml();
                        });
                    }else{
                        layer.msg(r.msg, {
                            icon: 2,
                            shade: 0.3,
                            time: 1000
                        });
                    }
                }
            })
            $("#formDiv input").val('')
            return false;
        });

        form.on('submit(deleteButton)', function(data){
            $.ajax({
                url:"/sys/menu/delete/"+$("#menuId").val(),
                type:"post",
                contentType: "application/json",
                data:JSON.stringify(data.field),
                success:function (r) {
                    if (r.code == 0) {
                        layer.msg(r.msg, {
                            icon: 1,
                            shade: 0.3,
                            time: 2000
                        }, function () {
                            //疯狂模式，关闭所有层
                            parent.layer.closeAll();
                            loadMenu();
                            loadLeftMenu();
                            appendMenuParentHtml()
                        });
                    }else{
                        layer.msg(r.msg, {
                            icon: 2,
                            shade: 0.3,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });
    });


    $('#addMenu').click(function () {
        $("#formDiv input").val('')
        layui.layer.open({
            type: 1,
            title: '新增',
            shadeClose: true,//点击遮罩关闭
            anim: 0,
            btnAlign: 'c',
            shade: false,//是否有遮罩，可以设置成false
            maxmin: false, //开启最大化最小化按钮
            area: ['40%', '50%'],
            boolean: true,
            content:$('#formDiv'),
            success: function (layero, lockIndex) {
            },
            end: function () {
                parent.layer.closeAll();
            }
        });
    })
</script>

</body>


</html>